<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>1_非受控组件</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 创建组件
        class Login extends React.Component {
            handleSubmit = (e) => {
                e.preventDefault(); // 阻止表单的默认提交行为
                const { username, password } = this;
                alert(`用户名：${username.value}，密码：${password.value}`);
            }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input ref={c => this.username = c} type="text" name="username" /><br />
                        密码：&emsp;<input ref={c => this.password = c} type="password" name="password" /><br /><br />
                        <button>登录</button>
                    </form>
                )
            }
        }

        // 渲染组件到页面
        ReactDOM.render(<Login />, document.getElementById("test"));
    </script>
</body>

</html>